<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>圣杯布局</title>
  <style media="screen">
    .container {
      padding: 0 200px 0 300px;
    }

    .main,
    .left,
    .right {
      min-height: 200px;
      float: left;
      position: relative;
    }

    .main {
      background: red;
      width: 100%;
    }

    .left {
      background: yellow;
      width: 300px;
      margin-left: -100%;
      left: -300px;
    }

    .right {
      background: green;
      width: 200px;
      right: -200px;
      margin-left: -200px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main">
      中间部分
    </div>
    <div class="left">
      左边
    </div>
    <div class="right">
      右边
    </div>
  </div>

</body>

</html>